<template>
  <div id="user-info">
    <a href="#" class="clear-fix">
      <slot name="user-icon">
        <svg
          t="1628498823677"
          class="icon lefticon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1974"
          width="50"
          height="50"
        >
          <path
            d="M512 652.8c-160 0-294.4-134.4-294.4-294.4S352 64 512 64s294.4 134.4 294.4 294.4-134.4 294.4-294.4 294.4z m0-550.4c-140.8 0-256 115.2-256 256s115.2 256 256 256 256-115.2 256-256-115.2-256-256-256z"
            fill=""
            p-id="1975"
          ></path>
          <path
            d="M940.8 966.4c-6.4 0-19.2-6.4-19.2-19.2-25.6-166.4-204.8-288-409.6-288s-377.6 121.6-409.6 288c0 12.8-12.8 19.2-19.2 12.8-12.8 0-19.2-12.8-19.2-19.2 32-179.2 224-320 448-320s416 140.8 448 320c0 12.8-6.4 25.6-19.2 25.6zM512 544c-76.8 0-140.8-44.8-160-115.2-6.4-12.8 0-19.2 12.8-25.6 12.8 0 19.2 0 25.6 12.8 19.2 57.6 70.4 89.6 128 89.6 57.6 0 108.8-38.4 128-89.6 6.4-12.8 12.8-12.8 25.6-12.8 12.8 6.4 12.8 12.8 12.8 25.6-32 70.4-102.4 115.2-172.8 115.2z"
            fill=""
            p-id="1976"
          ></path>
        </svg>
      </slot>
      <div class="login-info left">
        <slot name="user-nickname">
          <div>登录/注册</div>
        </slot>
        <div>
          <svg
            t="1628499180835"
            class="icon phone"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2981"
            width="20"
            height="20"
          >
            <path
              d="M512 802.816m-28.16 0a28.16 28.16 0 1 0 56.32 0 28.16 28.16 0 1 0-56.32 0Z"
              fill="#ffffff"
              p-id="2982"
            ></path>
            <path
              d="M708.096 94.72H315.904c-52.736 0-79.872 27.136-79.872 79.872v668.672c0 62.976 29.184 86.528 91.648 86.528h380.928c52.736 0 79.872-27.136 79.872-79.872V174.592c-0.512-52.736-27.136-79.872-80.384-79.872zM321.024 152.576l381.952 0.512c20.48 0 27.136 6.144 27.136 27.136V696.32H293.888V184.832c0-20.992 6.656-32.256 27.136-32.256zM706.56 870.912H317.44c-12.8 0-23.552-10.752-23.552-23.552v-103.424h435.712v103.424c0.512 13.312-10.24 23.552-23.04 23.552z"
              fill="#ffffff"
              p-id="2983"
            ></path>
          </svg>
          <slot name="user-phone">暂无绑定手机号</slot>
          <svg
            t="1628499706081"
            class="icon jiantou"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3809"
            width="20"
            height="20"
          >
            <path
              d="M347.687 144.188l-52.761 52.238 313.928 316.082-316.568 313.42 52.314 52.673 369.322-365.663z"
              p-id="3810"
              fill="#ffffff"
            ></path>
          </svg>
        </div>
      </div>
    </a>
  </div>
</template>

<script>
export default {
  name: "UserInfo",
};
</script>

<style scoped>
#user-info {
  background-color: var(--color-tint);
  padding: 15px;
  margin-top: -5px;
}
.icon {
  vertical-align: middle;
}
.lefticon {
  float: left;
  margin-top: 5px;
  background-color: #fff;
  border-radius: 50%;
}
#user-info .login-info {
  color: #fff;
  margin: 10px 0 0 10px;
}
.phone {
  margin: 5px 0 !important;
  vertical-align: middle;
}
.jiantou {
  margin-left: 130px;
}
</style>